@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700;800&display=swap');
/* Generated Logo Start */
:root {
 --logo-height: 60px; 
}
.logo {
  height: var(--logo-height);
  background-image: url('/media/ou2lahau/logo-white.svg');
}
/* Generated Logo End */

/* Generated Light Logo Start */
footer .logo {
  background-image: url('/media/nunnwaaj/logo.svg');
  height: 60px;
}
/* Generated Light Logo End */

/* Palette Settings
primary: #007681
accent-01: #007681
*/


:root {
  --font-sans-serif: 'Quicksand', sans-serif;

  /* Global colours _____________________________________________________________________________________________________________ */
  /* Base colours ___________________ */
  --white:                #ffffff;
  --black:                #1a1a1a;
  --transparent:           transparent;

  /* Neutral colours ________________ */
  --neutral-10:           #FBFBFB;
  --neutral-20:           #F7F7F7;
  --neutral-30:           #EFEFEF;
  --neutral-40:           #DADADA;
  --neutral-50:           #BABABA;
  --neutral-60:           #919191;
  --neutral-70:           #707070;
  --neutral-80:           #595959;
  --neutral-90:           #454545;
  --neutral-100:          #2C2C2C;

  /* Primary colours ________________ */
  --primary-10:#DEFAF7;
  --primary-20:#A9F4F0;
  --primary-30:#76EDEA;
  --primary-40:#3CECEC;
  --primary-50:#0EDBE2;
  --primary-60:#00ADB7;
  --primary-70:#007681;
  --primary-80:#006467;
  --primary-90:#004D4B;

  /* Prime colours (editable base colours) */
  --prime-primary:        var(--primary-60);
  --prime-accent-01:      var(--accent-01-60);
  --primary-100:#002922;

  /* Accent colours _________________ */
  --accent-01-10:#DEFAF7;
  --accent-01-20:#A9F4F0;
  --accent-01-30:#76EDEA;
  --accent-01-40:#3CECEC;
  --accent-01-50:#0EDBE2;
  --accent-01-60:#00ADB7;
  --accent-01-70:#007681;
  --accent-01-80:#006467;
  --accent-01-90:#004D4B;
  --accent-01-100:#002922;

  --accent-02-10:         #FBE8EE;
  --accent-02-20:         #F3B8CC;
  --accent-02-30:         #ED89AB;
  --accent-02-40:         #E97099;
  --accent-02-50:         #E84A7F;
  --accent-02-60:         #DB1256;
  --accent-02-70:         #AF0E44;
  --accent-02-80:         #830A33;
  --accent-02-90:         #570722;
  --accent-02-100:        #2C0311;

  --accent-03-10:         #E7F2F6;
  --accent-03-20:         #B7D9E3;
  --accent-03-30:         #87C0D1;
  --accent-03-40:         #56A6BF;
  --accent-03-50:         #2490AE;
  --accent-03-60:         #0E80A4;
  --accent-03-70:         #0B6683;
  --accent-03-80:         #094D62;
  --accent-03-90:         #053342;
  --accent-03-100:        #031A20;

  /* System colours _________________ */
  --info-10:              #E7ECF9;
  --info-20:              #B7C6EE;
  --info-30:              #87A0E2;
  --info-40:              #5F81DD;
  --info-50:              #3F66D1;
  --info-60:              #1748D0;
  --info-70:              #0F40C5;
  --info-80:              #0C339E;
  --info-90:              #092676;
  --info-100:             #04133B;

  --valid-10:             #E7F3E7;
  --valid-20:             #B9DDB9;
  --valid-30:             #8AC48A;
  --valid-40:             #5DAC5B;
  --valid-50:             #46A144;
  --valid-60:             #168914;
  --valid-70:             #136E11;
  --valid-80:             #0C520C;
  --valid-90:             #093708;
  --valid-100:            #041B04;

  --caution-10:           #FFF3E7;
  --caution-20:           #FFD7B3;
  --caution-30:           #FFBD80;
  --caution-40:           #FEA24D;
  --caution-50:           #FF9533;
  --caution-60:           #FF7A00;
  --caution-70:           #E66E00;
  --caution-80:           #B35400;
  --caution-90:           #7F3D00;
  --caution-100:          #4C2400;

  --danger-10:            #FBE7E8;
  --danger-20:            #F4B6B7;
  --danger-30:            #F09F9E;
  --danger-40:            #E86E6D;
  --danger-50:            #EE4949;
  --danger-60:            #D7050C;
  --danger-70:            #AE0A09;
  --danger-80:            #820807;
  --danger-90:            #590407;
  --danger-100:           #2A0202;

  /* Prime colours __________________ */
  /* Used to generate tints */
  --prime-primary:        var(--primary-70);
  --prime-danger:         var(--danger-60);
  --prime-caution:        var(--caution-60);
  --prime-valid:          var(--valid-60);
  --prime-info:           var(--info-70);

  /* Tints __________________________ */
  /* Black tint _____ */
  --black-tint-10:  #1a1a1a03; /* Black at 1% */
  --black-tint-20:  #1a1a1a0a; /* Black at 4% */
  --black-tint-30:  #1a1a1a12; /* Black at 7% */
  --black-tint-40:  #1a1a1a29; /* Black at 16% */
  --black-tint-50:  #1a1a1a4d; /* Black at 30% */
  --black-tint-60:  #1a1a1a7b; /* Black at 48% */
  --black-tint-70:  #1a1a1aa0; /* Black at 62.5% */
  --black-tint-80:  #1a1a1ab9; /* Black at 72.5% */
  --black-tint-90:  #1a1a1acf; /* Black at 81% */
  --black-tint-100: #1a1a1aeb; /* Black at 92% */

  /* White tint _____ */
  --white-tint-10:  #ffffff14; /* White at 8% */
  --white-tint-20:  #ffffff2f; /* White at 18.5% */
  --white-tint-30:  #ffffff46; /* White at 27.5% */
  --white-tint-40:  #ffffff60; /* White at 37.5% */
  --white-tint-50:  #ffffff85; /* White at 53% */
  --white-tint-60:  #ffffffb3; /* White at 70% */
  --white-tint-70:  #ffffffd6; /* White at 84% */
  --white-tint-80:  #ffffffed; /* White at 93% */
  --white-tint-90:  #fffffff7; /* White at 97% */
  --white-tint-100: #fffffffc; /* White at 99% */

  /* Primary tint ____*/
  --primary-tint-10:rgba(0,118,129,0.1); /* Prime at 10% */
  --primary-tint-20:rgba(0,118,129,0.3); /* Prime at 30% */
  --primary-tint-30:rgba(0,118,129,0.5); /* Prime at 50% */
  --primary-tint-40:rgba(0,118,129,0.66); /* Prime at 66% */

  /* Accent 01 tint __*/
  --accent-01-tint-10:rgba(0,173,183,0.1); /* Prime at 10% */
  --accent-01-tint-20:rgba(0,173,183,0.3); /* Prime at 30% */
  --accent-01-tint-30:rgba(0,173,183,0.5); /* Prime at 50% */
  --accent-01-tint-40:rgba(0,173,183,0.67); /* Prime at 67% */

  /* Accent 02 tint __*/
  --accent-02-tint-10: #db12561a; /* Prime at 10% */
  --accent-02-tint-20: #db12564d; /* Prime at 30% */
  --accent-02-tint-30: #db125680; /* Prime at 50% */
  --accent-02-tint-40: #db125699; /* Prime at 60% */

  /* Accent 03 tint __*/
  --accent-03-tint-10: #0e80a41a; /* Prime at 10% */
  --accent-03-tint-20: #0e80a44d; /* Prime at 30% */
  --accent-03-tint-30: #0e80a480; /* Prime at 50% */
  --accent-03-tint-40: #0e80a4b3; /* Prime at 70% */

  /* Info tint _______*/
  --info-tint-10:  #0f40c51a; /* Prime at 10% */
  --info-tint-20:  #0f40c54d; /* Prime at 30% */
  --info-tint-30:  #0f40c580; /* Prime at 50% */
  --info-tint-40:  #0f40c5a8; /* Prime at 66% */

  /* Valid tint ______*/
  --valid-tint-10:  #1689141a; /* Prime at 10% */
  --valid-tint-20:  #1689144d; /* Prime at 30% */
  --valid-tint-30:  #16891480; /* Prime at 50% */
  --valid-tint-40:  #168914b3; /* Prime at 70% */

  /* Caution tint ____*/
  --caution-tint-10:  #ff7a001a; /* Prime at 10% */
  --caution-tint-20:  #ff7a004d; /* Prime at 30% */
  --caution-tint-30:  #ff7a0080; /* Prime at 50% */
  --caution-tint-40:  #ff7a00b3; /* Prime at 70% */

  /* Dangeer tint ____*/
  --danger-tint-10:  #d7050c1a; /* Prime at 10% */
  --danger-tint-20:  #d7050c4d; /* Prime at 30% */
  --danger-tint-30:  #d7050c66; /* Prime at 40% */
  --danger-tint-40:  #d7050c99; /* Prime at 60% */


  /* Foundation colours _________________________________________________________________________________________________________ */
  /* Text colours _____________________________________________________ */
  /* --text-primary can be picked from palette of primary colours plus --black */
  --text-primary:var(--black);
  /* --text-secondary can be picked from palette of primary and neutral colours */
  --text-secondary:var(--neutral-90);
  --text-tertiary:                var(--neutral-80);
  --text-muted:                   var(--black-tint-70);

  --text-light:                   var(--white);
  --text-active:                  var(--info-60);
  --text-success:                 var(--valid-60);
  --text-error:                   var(--danger-60);

  /* UI colours _______________________________________________________ */
  --ui-background-01:             var(--white);
  --ui-background-02:             var(--neutral-10);
  --ui-background-03:             var(--neutral-20);

  --ui-overlay-01:                var(--black-tint-10);
  --ui-overlay-02:                var(--black-tint-20);
  --ui-overlay-03:                var(--black-tint-30);
  --ui-overlay-04:                var(--black-tint-60);

  --ui-border-01:                 var(--neutral-60);
  --ui-border-02:                 var(--neutral-40);
  --ui-border-03:                 var(--neutral-30);
  --ui-border-04:                 var(--white);

  /* State colours ____________________________________________________ */
  --focus-01:                     var(--info-60);
  --success-01:                   var(--valid-60);
  --error-01:                     var(--danger-60);

  --disabled-01:                  var(--black-tint-30);
  --disabled-02:                  var(--black-tint-40);
  --disabled-03:                  var(--black-tint-50);
  --disabled-04:                  var(--white);

  /* Action colours ___________________________________________________ */
  --action-01:var(--primary-70);
  --action-02:                    var(--primary-50);
  --action-03:                    var(--primary-90);
  --action-04:                    var(--primary-tint-10);
  --action-05:                    var(--black-tint-30);
  --action-06:                    var(--neutral-60);
  --action-07:                    var(--white);

  --action-text-01:var(--primary-70);
  --action-text-02:               var(--white);
  --action-text-03:               var(--black-tint-70);
  --action-text-04:               var(--neutral-80);
  --action-text-05:               var(--neutral-90);

  --action-danger-01:             var(--danger-60);
  --action-danger-02:             var(--danger-70);
  --action-danger-03:             var(--danger-90);
  --action-danger-04:             var(--danger-tint-10);
  --action-text-danger-01:        var(--danger-60);

  /* Feedback colours _________________________________________________ */
  --feedback-background-info:     var(--info-10);
  --feedback-overlay-info:        var(--info-tint-10);
  --feedback-border-info:         var(--info-50);
  --feedback-message-info:        var(--info-60);
  --feedback-body-info:           var(--info-100);
  --feedback-shadow-info:         var(--info-100);

  --feedback-background-success:  var(--valid-10);
  --feedback-overlay-success:     var(--valid-tint-10);
  --feedback-border-success:      var(--valid-60);
  --feedback-message-success:     var(--valid-70);
  --feedback-body-success:        var(--valid-100);
  --feedback-shadow-success:      var(--valid-100);

  --feedback-background-warning:  var(--caution-10);
  --feedback-overlay-warning:     var(--caution-tint-10);
  --feedback-border-warning:      var(--caution-80);
  --feedback-message-warning:     var(--caution-80);
  --feedback-body-warning:        var(--caution-100);
  --feedback-shadow-warning:      var(--caution-100);

  --feedback-background-error:    var(--danger-10);
  --feedback-overlay-error:       var(--danger-tint-10);
  --feedback-border-error:        var(--danger-60);
  --feedback-message-error:       var(--danger-60);
  --feedback-body-error:          var(--danger-100);
  --feedback-shadow-error:        var(--danger-100);

  /* Expressive colours _______________________________________________ */
  --expressive-pale:var(--primary-10);
  --expressive-soft:var(--primary-20);
  --expressive-deep:var(--primary-60);
  --expressive-rich:var(--primary-90);
  --expressive-pale-overlay:var(--primary-tint-10);
  --expressive-soft-overlay:var(--primary-tint-20);

  --expressive-secondary-pale:var(--accent-01-10);
  --expressive-secondary-soft:var(--accent-01-20);
  --expressive-secondary-deep:var(--accent-01-60);
  --expressive-secondary-rich:var(--accent-01-90);
  --expressive-secondary-pale-overlay:var(--accent-01-tint-10);
  --expressive-secondary-soft-overlay:var(--accent-01-tint-20);

  --expressive-tertiary-pale: var(--accent-02-10);
  --expressive-tertiary-soft: var(--accent-02-20);
  --expressive-tertiary-deep: var(--accent-02-60);
  --expressive-tertiary-rich: var(--accent-02-90);
  --expressive-tertiary-pale-overlay: var(--accent-02-tint-10);
  --expressive-tertiary-soft-overlay: var(--accent-02-tint-20);

  --expressive-quaternary-pale: var(--accent-03-10);
  --expressive-quaternary-soft: var(--accent-03-20);
  --expressive-quaternary-deep: var(--accent-03-60);
  --expressive-quaternary-rich: var(--accent-03-90);
  --expressive-quaternary-pale-overlay: var(--accent-03-tint-10);
  --expressive-quaternary-soft-overlay: var(--accent-03-tint-20);

  /* Other necessary colours ____________________________________________________________________________________________________ */
  /* Validation colours _______________________________________________ */
  --form-validation-error: var(--error-01);

  /* Link colours _____________________________________________________ */
  /* --link-text can be set to --text-active, --accent-01-* or --text-primary */
  --link-text:var(--text-active);
  --link-icon: var(--link-text);
  --link-text-hover: var(--link-text);
  --link-icon-hover: var(--link-text-hover);
  --link-text-active: var(--text-primary);
  --link-icon-active: var(--link-text-active);
  --link-text-visited: var(--link-text);
  --link-icon-visited: var(--link-text-visited);

  --auth-background-color:var(--primary-70);
}

/* UI colours _________________________________________________________________________________________________________________ */
/* Body _____________________________________________________________ */
body {
  color: var(--text-primary);
  background-color: var(--ui-background-02);
}

/* Anchor ___________________________________________________________ */
a {
  color: var(--link-text);
}

a:hover {
  color: var(--link-text-hover);
}

a:active {
  color: var(--link-text-active);
}

/* a:visited {
    color: var(--link-text-visited);
} */

/* Focus ____________________________________________________________ */
:focus-visible {
  outline-color: var(--focus-01);
}

/* Text _____________________________________________________________ */
h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
  color: inherit;
}

small, .small {
  color: var(--text-muted);
}

/* Expressive palettes ______________________________________________ */
.expressive-secondary {
  --expressive-pale: var(--expressive-secondary-pale);
  --expressive-soft: var(--expressive-secondary-soft);
  --expressive-deep: var(--expressive-secondary-deep);
  --expressive-rich: var(--expressive-secondary-rich);
  --expressive-pale-overlay: var(--expressive-secondary-pale-overlay);
  --expressive-soft-overlay: var(--expressive-secondary-soft-overlay);
}

.expressive-tertiary {
  --expressive-pale: var(--expressive-tertiary-pale);
  --expressive-soft: var(--expressive-tertiary-soft);
  --expressive-deep: var(--expressive-tertiary-deep);
  --expressive-rich: var(--expressive-tertiary-rich);
  --expressive-pale-overlay: var(--expressive-tertiary-pale-overlay);
  --expressive-soft-overlay: var(--expressive-tertiary-soft-overlay);
}

.expressive-quaternary {
  --expressive-pale: var(--expressive-quaternary-pale);
  --expressive-soft: var(--expressive-quaternary-soft);
  --expressive-deep: var(--expressive-quaternary-deep);
  --expressive-rich: var(--expressive-quaternary-rich);
  --expressive-pale-overlay: var(--expressive-quaternary-pale-overlay);
  --expressive-soft-overlay: var(--expressive-quaternary-soft-overlay);
}

/* Components colours _________________________________________________________________________________________________________ */
/* Buttons __________________________________________________________ */
.btn {
  --button-shadow-focus: 0 0 0 0.125rem var(--focus-01);
}

.btn-primary {
  --button-label: var(--action-text-02);
  --button-background: var(--action-01);
  --button-border: var(--action-01);
  --button-label-hover: var(--action-text-02);
  --button-background-hover: var(--action-02);
  --button-border-hover: var(--action-02);
  --button-label-active: var(--action-text-02);
  --button-background-active: var(--action-03);
  --button-border-active: var(--action-03);
  --button-label-focus: var(--action-text-02);
  --button-background-focus: var(--action-02);
  --button-border-focus: var(--action-07);
}

.btn-secondary {
  --button-label: var(--action-text-01);
  --button-background: var(--action-07);
  --button-border: var(--action-01);
  --button-label-hover: var(--action-text-01);
  --button-background-hover: var(--action-04);
  --button-border-hover: var(--action-01);
  --button-label-active: var(--action-text-02);
  --button-background-active: var(--action-01);
  --button-border-active: var(--action-01);
  --button-label-focus: var(--action-text-01);
  --button-background-focus: var(--action-04);
  --button-border-focus: var(--action-07);
}

.btn-ghost,
.bh-carousel-control-prev,
.bh-carousel-control-next {
  --button-label: var(--action-text-01);
  --button-label-hover: var(--action-text-01);
  --button-background-hover: var(--action-04);
  --button-background-active: var(--action-01);
  --button-border-active: var(--action-01);
  --button-label-focus: var(--action-text-01);
}

/* Close button _____________________________________________________ */
.btn-close {
  --btn-close-icon: var(--action-text-03);
  --btn-close-focus-ring: 0 0 0 0.125rem var(--focus-01);
  --btn-close-background: var(--transparent);
  --btn-close-background-hover: var(--action-05);
  --btn-close-background-focus: var(--action-05);
}

.btn-close:hover {
  --btn-close-background: var(--btn-close-background-hover);
}

.btn-close:focus {
  --btn-close-background: var(--btn-close-background-focus);
}

[class*=-info] .btn-close:hover,
[class*=-info] .btn-close:focus {
  --btn-close-background: var(--feedback-overlay-info);
}

[class*=-success] .btn-close:hover,
[class*=-success] .btn-close:focus {
  --btn-close-background: var(--feedback-overlay-success);
}

[class*=-warning] .btn-close:hover,
[class*=-warning] .btn-close:focus {
  --btn-close-background: var(--feedback-overlay-warning);
}

[class*=-error] .btn-close:hover,
[class*=-error] .btn-close:focus {
  --btn-close-background: var(--feedback-overlay-error);
}

[class*=-info] .btn-close-sm {
  --btn-close-icon: var(--feedback-message-info);
}

[class*=-success] .btn-close-sm {
  --btn-close-icon: var(--feedback-message-success);
}

[class*=-warning] .btn-close-sm {
  --btn-close-icon: var(--feedback-message-warning);
}

[class*=-error] .btn-close-sm {
  --btn-close-icon: var(--feedback-message-error);
}

.expressive-light .btn-close,
.btn-close.expressive-light {
  --btn-close-icon: var(--expressive-deep);
}

.expressive-light .btn-close:hover,
.expressive-light .btn-close:focus,
.btn-close.expressive-light:hover,
.btn-close.expressive-light:focus {
  --btn-close-background: var(--expressive-pale-overlay);
}

/* Forms & inputs ___________________________________________________ */
.form-control {
  --form-input-border: var(--ui-border-01);
  --form-input-background: var(--ui-background-01);
  --form-input-text: var(--text-primary);
  --form-input-placeholder: var(--text-muted);
  --form-input-border-focus: var(--focus-01);
  --form-input-focus-ring: 0 0 0 1px var(--form-input-border-focus);
  --form-input-background-disabled: var(--disabled-01);
  --form-input-border-disabled: var(--disabled-02);
  --form-text-disabled: var(--disabled-03);
  --form-input-border-error: var(--form-validation-error);
}

.form-select {
  --form-select-background: var(--ui-background-01);
  --form-select-border: var(--ui-border-01);
  --form-select-text: var(--text-primary);
  --form-select-border-focus: var(--focus-01);
  --form-select-focus-ring: 0 0 0 1px var(--form-select-border-focus);
  --form-select-background-disabled: var(--disabled-01);
  --form-select-border-disabled: var(--disabled-02);
  --form-select-text-disabled: var(--disabled-03);
}

.form-label {
  --form-label: var(--text-secondary);
  --form-label-disabled: var(--disabled-03);
}

.input-icon {
  --form-input-icon: var(--text-muted);
}

.form-helper {
  --form-helper: var(--text-muted);
}

/* Form validation _______________ */
.was-validated .form-control:invalid,
.form-control.is-invalid,
.was-validated .form-select:invalid,
.form-select.is-invalid {
  border-color: var(--form-input-border-error);
}

.was-validated .form-control:invalid:focus,
.form-control.is-invalid:focus,
.was-validated .form-select:invalid:focus,
.form-select.is-invalid:focus {
  border-color: var(--form-input-border-error);
  box-shadow: 0 0 0 1px var(--form-validation-error);
}

.invalid-feedback {
  color: var(--form-validation-error);
}

/* Form input buttons ____________ */
.input-btn {
  --form-input-button-background-hover: var(--action-04);
  --form-input-button-icon: var(--action-text-01);
}

.input-btn.input-clear {
  --form-input-button-icon: var(--action-text-03);
  --form-input-button-background-hover: var(--action-05);
}

/* Checkbox / Radio / Switch______ */
.form-check {
  --form-check-label: var(--text-secondary);
  --form-check-label-disabled: var(--disabled-03);
}

.form-check-input {
  --form-check-input-background: var(--ui-background-01);
  --form-check-input-border: var(--action-01);
  --form-check-input-focus: 0 0 0 1px var(--ui-border-04), 0 0 0 3px var(--focus-01);
  --form-check-input-background-active: var(--action-01);
  --form-check-input-border-active: var(--action-01);
  --form-check-input-background-disabled: var(--disabled-02);
  --form-check-input-border-disabled: var(--transparent);
}

.form-switch {
  --switch-track-background: var(--ui-overlay-04);
  --switch-track-border: var(--transparent);
  --switch-status-tag: var(--text-muted);

  --switch-track-background-on: var(--success-01);
  --switch-track-border-on: var(--transparent);
  --switch-status-tag-on: var(--switch-status-tag);
}


/* Imagery __________________________________________________________ */
/* Icon block ____________________ */
.icon-block { /* Icon block: default style */
  --icon-block-icon:var(--primary-70);
  --icon-block-background:var(--ui-overlay-03);
  --icon-block-border:var(--transparent);
}

.icon-block.expressive-light {
  --icon-block-icon: var(--expressive-deep);
  --icon-block-background: var(--expressive-pale-overlay);
}

.icon-block.expressive-dark {
  --icon-block-icon: var(--text-light);
  --icon-block-background: var(--expressive-rich);
}

/* Navigation _______________________________________________________ */
.nav {
  --nav-link-active: var(--action-text-01);
  --nav-link-background-active: var(--action-04);
}

/* Standalone link _______________ */
a.link-standalone .icon {
  color: var(--link-icon);
}

a.link-standalone:hover .icon {
  color: var(--link-icon-hover);
}

/* a.link-standalone:visited .icon {
    color: var(--link-icon-visited);
} */

a.link-standalone:active .icon {
  color: var(--link-icon-active);
}

/* Status indicators ________________________________________________ */
/* Tag ___________________________ */
.tag {
  --tag-border: var(--transparent);
  --tag-background: var(--action-05);
  --tag-label: var(--action-text-04);
  --tag-icon: var(--tag-label);
}

.tag-selectable {
  --tag-background: var(--transparent);
  --tag-border: var(--action-06);
  --tag-label: var(--action-text-04);
}

.tag-selectable:hover {
  --tag-background: var(--action-05);
  --tag-border: var(--action-06);
  --tag-label: var(--action-text-04);
}

.tag-selectable.active {
  --tag-background: var(--action-04);
  --tag-border: var(--transparent);
  --tag-label: var(--action-text-01);
}

.tag-status-info {
  --tag-background: var(--feedback-background-info);
  --tag-border: var(--feedback-border-info);
  --tag-label: var(--feedback-message-info);
}

.tag-status-success {
  --tag-background: var(--feedback-background-success);
  --tag-border: var(--feedback-border-success);
  --tag-label: var(--feedback-message-success);
}

.tag-status-warning {
  --tag-background: var(--feedback-background-warning);
  --tag-border: var(--feedback-border-warning);
  --tag-label: var(--feedback-message-warning);
}

.tag-status-error {
  --tag-background: var(--feedback-background-error);
  --tag-border: var(--feedback-border-error);
  --tag-label: var(--feedback-message-error);
}

.tag.expressive-light {
  --tag-background: var(--expressive-pale-overlay);
  --tag-label: var(--expressive-deep);
  --tag-icon: var(--expressive-deep);
}

/* Text & data display ______________________________________________ */
/* Card __________________________ */
.card {
  --card-border: var(--ui-border-02);
  --card-background: var(--ui-background-01);
  --card-background-secondary: var(--ui-overlay-02);
  --card-border-secondary: var(--transparent);
  --card-text: var(--text-primary);
  --card-cap-background: var(--ui-overlay-02);
  --card-cap-text: var(--card-text);
  --card-cap-border: none;
}


.card-selectable {
  --card-selectable-focus-ring: 0 0 0 1px var(--ui-border-04), 0 0 0 3px var(--focus-01);
}

.card-selectable.active {
  --card-background: var(--action-04);
  --card-border: var(--action-01);
}

.card-clickable:hover,
.card-selectable:hover {
  --card-border: var(--link-text-hover);
}

/* Text block ____________________ */
.text-block {
  --eyebrow: var(--text-tertiary);
}

/* For actions we have options:
Default: no expressive styles, default values: */
.btn-ghost,
.bh-carousel-control-prev,
.bh-carousel-control-next {
  --button-label: var(--action-text-01);
  --button-label-hover: var(--action-text-01);
  --button-background-hover: var(--action-04);
  --button-background-active: var(--action-01);
  --button-border-active: var(--action-01);
  --button-label-focus: var(--action-text-01);
}

.input-btn {
  --form-input-button-background-hover: var(--action-04);
  --form-input-button-icon: var(--action-text-01);
}

.nav {
  --nav-link-active: var(--action-text-01);
  --nav-link-background-active: var(--action-04);
}

/* Accent option can be set in the UI:
.btn-ghost,
.bh-carousel-control-prev,
.bh-carousel-control-next {
    --button-label: var(--accent-01-80);
    --button-label-hover: var(--accent-01-80);
    --button-background-hover: var(--accent-01-tint-10);
    --button-background-active: var(--accent-01-80);
    --button-border-active: var(--accent-01-80);
    --button-label-focus: var(--accent-01-80);
}

.nav {
    --nav-link-active: var(--accent-01-80);
    --nav-link-background-active: var(--accent-01-tint-10);
}

.input-btn {
  --form-input-button-background-hover: var(--accent-01-tint-10);
  --form-input-button-icon: var(--accent-01-80);
}
*/

/* For icons we have options:
Default: no expressive styles,
Expressive light:
.icon-block {
  --icon-block-icon:            var(--expressive-deep);
  --icon-block-background:      var(--expressive-pale-overlay);
}
Expressive dark:
.icon-block {
  --icon-block-icon:            var(--text-light);
  --icon-block-background:      var(--expressive-rich);
}*/

/* For product icons we have options: primary and accent colours. --primary-70 is default: */
:root {
  --product-icon-background-color:var(--primary-70);
}

/* Avatar can have 3 styles: default (primary), expressive light, expressive dark
Default:
--avatar-background: var(--expressive-soft);
--avatar-text: var(--expressive-rich);
Expressive light:
--avatar-background: var(--accent-01-10);
--avatar-text: var(--accent-01-60);
Expressive dark:
--avatar-background: var(--accent-01-20);
--avatar-text: var(--accent-01-90);
*/

.avatar {
    --avatar-background:var(--expressive-soft);
    --avatar-text:var(--expressive-rich);
}

:root {
  /* --headline-font-weight and --display-font-weight can have 4 options: Light (300), Regular (400), Medium (500), Bold (600) */
  --headline-font-weight:600;
  --display-font-weight:500;

  /* --product-icon-border-radius can have 3 options:
  Default (var(--border-radius-md)),
  Rounded (9999px),
  Square (0)
  */
  --product-icon-border-radius:var(--border-radius-md);
}

/* --card-radius can have 3 options:
Square (0),
Default (var(--border-radius-lg)),
Rounded (9999px)
*/
.card, .hero-card {
    --card-radius:var(--border-radius-lg);
}

/* --nav-link-radius can have 2 options:
Square (0),
Default (var(--border-radius-md))
*/
.nav {
    --nav-link-radius:var(--border-radius-md);
}

/* --accordion-radius can have 2 options:
Square (0),
Default (var(--border-radius-md))
*/
.accordion, .dropzone, .toast, .alert {
    --accordion-radius:var(--border-radius-md);
}

/* --button-radius can have 3 options:
Rounded (var(--border-radius-md)),
Square (0),
Default (9999px)
*/
.btn {
    --button-radius:var(--border-radius-md);
}

/* Icon block radius can have 3 options:
Default (var(--border-radius-md)),
Rounded (9999px),
Square (0)
*/
.icon-block {
    --icon-block-radius:var(--border-radius-md);
}

/* Icon block radius can be changed in the UI:
--icon-block-radius:9999px; (rounded)
or
--icon-block-radius:0; (square)
*/

/* Illustration colours can be picked from any of the primary and secondary colours */
:root {
  --illustration--shadow:var(--primary-100);
  --illustration--accent:var(--accent-01-10);
  --illustration--mid-tone:var(--primary-40);
}

/* --icon-link-icon-text can be --text-active, --accent-01-*, --text-primary */
:root {
 --icon-link-icon-text:var(--text-active);
}

/* Navbar styles */
:root {
    --navbar-border-top-color:var(--ui-border-dark);
    --navbar-background-color:var(--ui-background-dark);
}

.account-toggle {
    --account-toggle-text: var(--white);
    --account-toggle-text-hover: var(--white);
}
.account-toggle-label {
    --icon-link-icon-text: var(--white);
}

/* Footer styles */
:root {
    --footer-background-color:var(transparent);
    --footer-color:var(--text-primary);
    --footer-divider-color:var(--ui-border-02);
}



/* Hero card style can be --ui-overlay-02 (default) or --primary-tint-10 */
.hero-card {
    --card-background-secondary:var(--ui-overlay-02);
}

/* Hero card style can be changed in the UI:
--card-background-secondary: var(--primary-tint-10);
*/



.versa-tile { --versa-tile-radius: var(--border-radius-md);
}

footer {
}